import React from 'react'
import { Tabs,Table,Row,Col,Input,Button,Modal,Icon } from 'antd'
import moment from 'moment'

const confirm = Modal.confirm

class Department extends React.Component {
	constructor(props) {
		super(props)
		this.state = {
			name:'',
			number:'',
		}
	}
	remove(data){
		const { deleteDep } = this.props
		confirm({
			title:"您确定要移除该部门吗？",
			onOk(){
				deleteDep(data.id)
			}
			
		})
	}
	nameChange=(e)=>{
  		this.setState({name:e.target.value})
  	}
	numberChange=(e)=>{
		this.setState({number:e.target.value})
	}
	searchLeave(){
		const { onSearch } = this.props
		const params = {}
		if(this.state.name != ''){
			params.name = this.state.name
		}
		if(this.state.number != ''){
			params.number = this.state.number
		}
		
		onSearch(params)
	}
	edit(record,k){
		const { showModal } = this.props
		if(k == 1){
			showModal(record.id)			
		}
	}	
	async pageChange(pagination) {
	    await this.props.onPageChange(pagination);
	    this.newPage = pagination.current;
	}
	
	render(){
		const { list,pagination1,loading } = this.props
		if(!list){
			return null
		}
		const list1 = [];
		list.map((item,i)=>{
			item.key = i
			list1.push(item)
		})
		const datas = [
			{	
				key:"1",
				name:"1",
				time:'',
				number:'111',
				address:"成都XXXXXX",
				phone:'123',
				description:"11",
			},
			{	
				key:"2",
				name:"2",
				time:'',
				number:'222',
				address:"成都XXXXXXXXXXXXX",
				phone:'456',
				description:"222",
			}
		]
		const columns = [
			{
				title:'机构名称',
				dataIndex:'name',
				key:"name",
			},{
				title:'创建时间',
				dataIndex:'createdTime',
				key:'createdTime',
				render:(text,record)=>{
					return(
						<p>
							{moment(record.createTime).format("YYYY-MM-DD HH:mm:ss")}
						</p>
					)
				}
			},{
				title:'机构编号',
				dataIndex:'number',
				key:'number',
			},{
				title:'机构地址',
				dataIndex:'address',
				key:'address'
			},{
				title:'联系方式',
				dataIndex:'contactWay',
				key:'contactWay'
			},{
				title:'操作',
				dataIndex:'',
				render:(text,record) => {
					return(
						<div>
							<span style={{marginRight:10}} onClick={this.edit.bind(this,record,1)}><a href="#">添加部门</a></span>
						</div>
					)
				}
			}
		]		
		return(
			<div>
				<h3 style={{fontWeight:600}}>机构管理列表:</h3>
				<Row style={{marginTop:10}} gutter={24} span={24}>
					<Col lg={6} md={3} sm={4} xs={6} style={{ marginBottom: 16 }}>
			            <span>机构名称:&nbsp;&nbsp;</span>
			            <Input
			              placeholder="请输入机构名称关键字"
			              onChange={this.nameChange.bind(this)}
			              style={{ width: 200 }}
			            />
			         </Col>
			         <Col lg={6} md={3} sm={4} xs={6} style={{marginBotton: 16 }}>
			         	<span>机构编号:&nbsp;&nbsp;</span>
			            <Input
			              placeholder="请输入机构编号关键字"
			              onChange={this.numberChange.bind(this)}
			              style={{ width: 200 }}
			            />
			         </Col>
			         <Col lg={6} md={3} sm={4} xs={6} style={{marginBotton: 16 }}>
				         <Button
				              style={{ marginLeft: 10,width:200,height:30 }}
				              type="primary"
				              size="default"
				              onClick={this.searchLeave.bind(this)}
				            >
				              查询
	            			 </Button>
            			 </Col>
				</Row>
		      	
		      	<Table
				    columns={columns}
				    expandedRowRender={record => {
				    		const list1 = [];
				    		if(record.department){
				    			record.department.map((item,i)=>{
					    			list1.push(<span style={{padding:"5px 10px",marginRight:10,background:"rgb(232,232,232)",borderRadius:5}}>{item.name}<Icon onClick={this.remove.bind(this,item)} type="close" style={{ cursor:'pointer'}} /></span>)
					    		})
				    		}
				    		return(
				    			<div>
				    				{list1.length > 1?list1:'暂未添加部门信息,请点击添加部门进行添加'}
				    			</div>	
				    		)
				    }}
				    dataSource={list1}
				    loading={loading}
			        onChange={this.pageChange.bind(this)}
			        pagination={pagination1}
				  />
			</div>
		)
	}
}

export default Department
